<template>
    <div id="saveUnit">
        <div class="back">
            <Button type="primary" style="width: 5%;height: 30px" @click="back()">返回</Button>
        </div>

        <Form :label-width="130">
            <FormItem label="元件哈希值">
                <Input v-model="hash" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="模型文件格式">
                <Input v-model="format" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="名称">
                <Input v-model="name" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="标签">
                <Input v-model="tags" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="元件类型">
                <Input v-model="type" placeholder="Enter something..."></Input>
            </FormItem>
            <FormItem label="uv遮罩">
                <input type="file" id="img" />
                <img :src="'https://s3.cifuwu.com/image/show/origin/'+ uv_mask "  alt="未上传图片"/>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="loadimage()" style="width: 10%;height: 30px">提交</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
    import {saveUnit} from '../../http/API/index.js'
    import { loadimage } from '../../http/API/index'
    import Base64 from '../../utils/base64'
    export default{
        data(){
            return{
                hash: "",
                format: "",
                name:"",
                tags:"",
                type:"",
                uv_mask:"",
                imgData:""
            }
        },
        methods:{
            saveUnit() {
                saveUnit(this.hash,this.format,this.name,this.tags,this.type,this.uv_mask).then((res) => {
                    if (res.code === 20000) {
                        console.log(res);
                    } else {
                        console.log("error");
                    }
                })

            },
            back(){
                this.$router.go(-1);
            },
            //url64_encode
            transform(){
                var str  = Base64.encode(this.tags);
                this.tags = str;
//                this.saveUnit();
            },
            //上传遮罩
            loadimage() {
                loadimage(this.imgData).then((res) => {
                    if (res.code === 20000) {
                        this.uv_mask = res.data['name'];
                        console.log(this.uv_mask);
                        this.transform();
                        this.saveUnit();
                    }
                }).catch(function (e) {
                    console.log(e);
                })
            },

            startt() {
                var img = document.getElementById('img');
                let _this = this;
                img.onchange = function (result) {

                    let image = result.target.files[0]
                    if (!(image.type.indexOf('image') == 0 && image.type && /\.(?:jpg|png|gif)$/.test(image.name))) {
                        alert('图片只能是jpg,gif,png');
                        return;
                    }

                    let imgFile = new FileReader();
                    imgFile.readAsDataURL(image);
                    imgFile.onload = function (e) {
                        _this.imgData = e.target.result;
                    };
                    //console.log(result)
                    if (!result) {
                        return;
                    }
                }
            }

        },
        mounted(){
            this.startt();
//            this.transform();
        },
    }
</script>
<style scoped>
    .ivu-form-item{
        margin: 25px;
    }
    .ivu-input-type	{
        width: 70%;
    }
    .ivu-form{
        width: 80%;
        margin: 0 auto;
    }
    img{
        width: 200px;
        height: 200px;
    }

</style>